<template>
  <div class="gallery-detail-container">
    <v-touch @swipeup="hideDial" @swipedown="showDial" v-if="!showLoading">
        <md-layout class="gallery-detail">
          <md-layout md-flex="33" class="gallery-header">
            <div class="header-thumb">
              <img v-lazy.container="data.basic_info.thumb" />
            </div>
          </md-layout>
          <div class="gallery-title">
            <h3 class="gallery-title-text md-title">{{data.basic_info.title}}</h3>
            <p class="uploader">{{data.basic_info.uploader}}</p>
            <div :class="['tag', data.basic_info.category]">{{data.basic_info.category.toUpperCase()}}</div>
           </div>
        </md-layout>
        <md-layout  class="gallery-content">
          <md-layout md-align="center" md-flex="33"  class="gallery-section">
            <p class="language">{{data.basic_info.Language}}</p>
            <p class="favorite times"><md-icon class="favorite-icon">favorite</md-icon>{{parseInt(data.basic_info.Favorited) || 0}}</p>
          </md-layout >
          <md-layout md-align="center" md-flex="33" class="gallery-section">
            <p class="total-page">{{pageLength}}页</p>
          </md-layout >
          <md-layout md-align="center" md-flex="33" class="gallery-section">
            <p class="gallery-size">{{parseFloat(data.basic_info['File Size'])}}MB</p>
            <p class="gallery-time">{{data.basic_info.Posted}}</p>
          </md-layout >
        </md-layout>
        <a class="">查看图库详情</a>
        <div class="gallery-rating">
          <ratings :rating="data.basic_info.rating"></ratings>
          <p>{{ratingInfo}}({{data.basic_info.rating}},{{data.basic_info.rating_count}})</p>
        </div>
        <tagsgroup :tagsGroup="data.tags_group"></tagsgroup>
        <galleryDetailList :galleryListData = "data.gallery_thumb.data"></galleryDetailList>
        <md-button @click.native="goPreview" class="md-primary">{{showText}}</md-button>
    </v-touch>
    <md-spinner v-if="showLoading" class="loading-spinner" :md-size="75" :md-stroke="2" md-indeterminate></md-spinner>
    <md-speed-dial :class="dialClass" md-mode="scale" class="md-fab-bottom-right">
      <md-button class="md-fab" md-fab-trigger>
        <md-icon  md-icon-morph>close</md-icon>
        <md-icon>add</md-icon>
      </md-button>
      <md-button @click.native="initData" class="md-fab md-mini md-clean">
        <md-icon>refresh</md-icon>
      </md-button>
      <md-button id="jump" @click.native="goBack" class="md-fab md-mini md-clean">
        <md-icon>navigate_before</md-icon>
      </md-button>
    </md-speed-dial>
  </div>
</template>

<script>
import {getGalleryDetail} from './../../service/getData'
import store from 'store'
export default {
  data () {
    return {
      showLoading: true,
      data: null,
      showText: null,
      dialClass: '',
      showKey: '',
      ratingText: require('./../../../client/data/galleryDetail')['ratingText']
    }
  },
  computed: {
    pageNumber () {
      return parseInt(this.data.basic_info.pageNumber)
    },
    pageLength () {
      return parseInt(this.data.basic_info.Length)
    },
    ratingInfo () {
      return this.ratingText[Math.round(parseFloat(this.data.basic_info.rating) * 2)]
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.setHistory(vm)
      vm.initData()
    })
  },
  methods: {
    async initData () {
      this.showLoading = true
      let token = this.$route.params.token
      let gid = this.$route.params.gid
      let data = await getGalleryDetail(gid, token)
      this.showLoading = false
      this.data = data.payload
      this.showText = data.payload.gallery_thumb.data.length < 20 ? '已显示所有预览' : '查看更多预览'
    },
    setHistory (vm) {
      let gid = Number(vm.$route.params.gid)
      let token = vm.$route.params.token
      let history = store.get('history')
      if (history === undefined) {
        store.set('history', [{
          gid,
          token
        }])
      } else {
        let a = history.filter(function (item) {
          return item.gid === gid
        })
        if (a.length === 0) {
          history.push({gid, token})
          store.set('history', history)
        }
      }
    },
    goPreview () {
      this.$router.push({name: 'galleryPreview', params: {token: this.$route.params.token, gid: this.$route.params.gid}})
    },
    goBack () {
      this.$router.go(-1)
    },
    hideDial () {
      this.dialClass = 'zoomOut animated'
    },
    showDial () {
      this.dialClass = 'zoomIn animated'
    }
  },
  components: {
    ratings: require('./../../components/common/rattingStars'),
    tagsgroup: require('./../../components/common/tagsGroup'),
    galleryDetailList: require('./../../components/common/galleryDetailList')
  }
}
</script>

<style scoped>
.router-fade-enter-active, .router-fade-leave-active {
  transition: opacity .3s;
}
.router-fade-enter, .router-fade-leave-active {
  opacity: 0;
}
.scrollable {
  overflow: auto;
  -webkit-overflow-scrolling : touch;
}
.gallery-detail-container {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling : touch;
}
.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -32.5px;
  margin-top: -32.5px;
}
.md-title {
  font-size: .675rem;
  font-weight: 500;
  letter-spacing: .005em;
  line-height: .835rem;
  font-weight: 600;
  margin-top: .651rem;
}
.uploader {
  margin: 0;
  color: #ffffff;
  font-size: .475rem
} 
.rating_container {
  margin: auto
}
.gallery-detail {
  background-color: #3f51b5;
  padding-bottom: 1rem;
  min-height: 10rem;
  align-items: center;
}
.gallery-rating {
  text-align: center
}
.gallery-content {
  padding: 0 20px;
}
.gallery-section p{

}
.gallery-content .gallery-section p {
  text-align: center;
  font-size: .5rem;
}
.header-thumb {
  margin: .5em;
  width: 5rem;
}
.header-thumb img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.gallery-title {
  flex: 1.5 1 0;
  align-self: flex-start;
}
.tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: .04rem .16rem;
  background-color: #ffffff;
  margin-top: 15px;
  font-size: .375rem;
}
.western {
  color: #8CC24A
}
.artistcg {
  color: #F9C130
}
.doujinshi {
  color: #F34334
}
.non-h {
  color: #2196F5
}
.misc {
  color: #F06292
}
.imageset {
  color: #3F51B5
}
.cosplay {
  color: #9D29B2
}
.gamecg {
  color: #4CB050
}
.manga {
  color: #FF9700
}
.favorite-icon {
  margin-right: 10px
}
.gallery-title-text {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  color: #ffffff;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
</style>
